<template>
  <div class="index">
   <el-container>
      <el-header>
        <Nosecone />
      </el-header>
      <el-container class="elContent">
        <el-aside style="width: 205px;">
          <NavMenu />
        </el-aside>
        <el-main>
          <Tags />
          <div class="content">
            <transition mode="out-in">
              <keep-alive>
                  <router-view class="center"></router-view>
              </keep-alive>
            </transition>
          </div>
        </el-main>
      </el-container>
   </el-container>
  </div>
</template>

<script>
import bus from "../utils/bus";
import Tags from "../components/mainpage/Tags";
import NavMenu from "../components/mainpage/NavMenu";
import Nosecone from "../components/mainpage/Nosecone";
export default {
  name: "Index",
  components: { Tags, NavMenu, Nosecone},
  mounted() {
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on("tags", (msg) => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++){
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
  },
};
</script>
<style scoped>
.v-enter{
 opacity: 0;
}
.v-enter-active{
 transition: 0.4s;
}
.v-enter-to{
 opacity: 1;
}
.v-leave{
 opacity: 1;
}
.v-leave-to{
 opacity:0;
}
.v-leave-active{
 transition: 0.4s;
}
.el-aside {
  overflow-y: auto;
  /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
  -ms-overflow-style: none;
  /*火狐下隐藏滚动条*/
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.elContent{
  width:100%;
  height:100%;
  margin-top:60px;
  position:fixed;
}
.el-main {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  overflow-y: auto;
  /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
  -ms-overflow-style: none;
  /*火狐下隐藏滚动条*/
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.el-header{
  background-color: #242f42;
}
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
}
.content {
  position: relative;
  margin-top: 10px;
  width: 100%;
  height: calc(100vh - 80px);
  display: inline-block;
  line-height: 40px;
  overflow-y: auto;
  /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
  -ms-overflow-style: none;
  /*火狐下隐藏滚动条*/
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
</style>
